<template>
	<view class="">
		<view class="bgw">
			<view class="font-bold"  @click="toggle()">
				<view class="blank20"></view>
				<view class="flex justify-between">
					<template v-for="col in table">
						<view :style="[col.style]">
							<view class="" v-if="col.key == 'date'">
								<text class="ml15">
									{{detail.date | filterDate}}
								</text>
							</view>
							<view class="flex" style="justify-content: center;" v-else-if="col.key == 'note'">
								<view class="icon-btn" :class="show?'active':''">

									<u-icon :name="show?'arrow-up':'arrow-down'" :color="show?'#ffffff':'#999999'" size="14"></u-icon>
								</view>
							</view>
							<view class="text-right" v-else-if="col.isRatio">
								{{detail[col.key] | formatPrice}}%
							</view>
							<view class="text-right" v-else>
								{{detail[col.key] | formatPrice}}
							</view>
						</view>
					</template>
				</view>
				<view class="blank20"></view>
			</view>
			<view v-show="show">
				<view class="" v-for="(v,i) in detail.childs" @click="reportDetail(v)">
					<u-line></u-line>
					<!-- <view class="bg-gray">
						<view class="blank10"></view>
						<view class="flex justify-between wrapper font-bold">
							<view class="">
								<text class="">{{v.cost_center_id[1]}}</text>
							</view>
							<view class="">
								<text class="">{{v.cus_group_id[1]}}</text>
							</view>
						</view>
						<view class="blank10"></view>
					</view>
					<u-line dashed></u-line> -->
					<view class="blank20"></view>
					<view class="flex justify-between">
						<template v-for="col in table">
							<view :style="[col.style]">
								<view class="flex" v-if="col.key == 'date'" style="justify-content: space-between;">
									<view class="ml15">{{v.cus_group_id?'':v.cost_center_id[1]}}</view>
									<view class="" style="font-style: italic;">{{v.cus_group_id[1]}}</view>
									<!-- <text class="ml15">{{v.cost_center_id[1]}}</text> -->
								</view>
								<view class="flex" style="justify-content: center;" v-else-if="col.key == 'note'">
									<u-icon name="arrow-right" color="#999999" size="12"></u-icon>
								</view>
								<view class="text-right" v-else-if="col.isRatio">
									{{v[col.key]| formatPrice}}%
								</view>
								<view class="text-right" v-else>
									{{v[col.key] | formatPrice}}
								</view>
							</view>
						</template>
					</view>
					<view class="blank20"></view>
				</view>
			</view>
		</view>

		<view class="blank20"></view>
		<!-- <u-line dashed></u-line> -->
	</view>
</template>

<script>
	export default {
		name: "sale-item",
		props: {
			detail: Object,
			table: Array,
			open:Boolean,
			source:{
				type:String,
				default:'report'
			}
		},
		data() {
			return {
				// id: this.detail.id,
				show: false,
				qty: [],
				price: [],
				picker_range: [
					['早餐', '午餐', '晚餐'],
					['快餐', '商务餐']
				],
				picker_value: [0, 0],
			};
		},
		watch: {
			detail: {
				handler(newVal, oldVal) {
					if(oldVal.date != newVal.date){
						this.show = false;
					}
				},
				immediate: false,
				deep: true
			},
			open(newVal, oldVal){
				this.show = newVal;
			},
		},
		filters: {

		},
		computed: {

		},
		methods: {
			reportDetail(v){
				let date = v.date;
				let cost_center_id = 0;
				let cost_center_id_name = '';
				let cus_group_id = 0;
				let cus_group_id_name = '';
				try{
					cost_center_id = v.cost_center_id[0];
					cost_center_id_name = v.cost_center_id[1];
				}catch(e){}
				try{
					cus_group_id_name = v.cus_group_id[1]||'';
					cus_group_id = v.cus_group_id[0]||0;
				}catch(e){}
				let arr = [];
				arr.push(`date=${date}`);
				arr.push(`cost_center_id=${cost_center_id}`);
				arr.push(`cost_center_id_name=${cost_center_id_name}`);
				arr.push(`cus_group_id_name=${cus_group_id_name}`);
				arr.push(`cus_group_id=${cus_group_id}`);
				if(this.source == 'report'){
					this.nav('/reportDetail/reportDetail?'+arr.join('&'));
				}
				if(this.source == 'cost'){
					this.nav('/reportDetail/costDetail?'+arr.join('&'));
				}
				if(this.source == 'costRatio'){
					arr.push(`isRatio=1`);
					this.nav('/reportDetail/costDetail?'+arr.join('&'));
				}
			},
			bind_picker_change(e) {
				let value = e.detail.value;
				this.picker_value = value;
				// console.log(this.picker_range);
				this.y_m = this.picker_range[0][value[0]] + '-' + this.picker_range[1][value[1]];

			},
			qty_change() {

			},
			price_change() {

			},
			toggle(time_i) {
				this.show = !this.show;
				this.$forceUpdate();
				this.$emit('toggle',this.show,this.detail.date)
			},
		}

	}
</script>

<style>

</style>